<template>
  <div class="login">
    <van-nav-bar
      title="注册"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="login-container">
      <div class="login-form">
        <form @submit.prevent="register">
          <div class="input-group">
            <label for="userName">用户名</label>
            <input type="text" id="userName" name="userName" v-model="userName" required placeholder="请输入用户名" />
          </div>
          <div class="input-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" v-model="password" required placeholder="请输入密码" />
          </div>
          <div class="input-group">
            <label for="phone">手机号</label>
            <input type="text" id="phone" name="phone" v-model="phone" required placeholder="请输入手机号" />
          </div>
          <button type="submit" class="btn">注册</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Toast } from 'vant'
export default {
  name: 'loginIndex',
  data () {
    return {
      userName: '', // 用户名绑定
      password: '', // 密码绑定
      phone: '' // 手机号绑定
    }
  },
  created () {
    // 初始化逻辑可以放在这里
  },
  methods: {
    async register () {
      const userNameRegex = /^[a-zA-Z0-9]{1,10}$/
      const passwordRegex = /^\d{8}$/
      const phoneRegex = /^1[3-9]\d{9}$/
      // 检查用户名和密码是否为空
      if (!this.userName || !this.password || !this.phone) {
        Toast.fail('用户名或密码或手机号不能为空')
        return
      } else if (!userNameRegex.test(this.userName)) {
        Toast.fail('用户名必须由不超过十个的字母数字组成')
      } else if (!passwordRegex.test(this.password)) {
        Toast.fail('密码必须是8位数字')
        return
      } else if (!phoneRegex.test(this.phone)) {
        Toast.fail('手机号不正确，请重新输入')
        return
      }

      try {
        // 发送登录请求，传递用户名和密码
        const res = await request.post('/register', {
          userName: this.userName,
          password: this.password,
          phone: this.phone
        })
        console.log(res)
        if (res.status === 200) {
          console.log(res.message)
          Toast.success(res.message)
          this.$router.push('/login') // 注册成功后跳转
        } else {
          Toast.fail(res.message || '注册失败失败')
        }
      } catch (error) {
        console.log(error.message)
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  margin-top: 20px;
  padding: 0 15px;
  height: 100%;
}

.login-form {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.captcha-container {
  display: flex;
  align-items: center;
}

.captcha-container input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn {
  padding: 10px;
  background-color: #e2b912;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.btn:hover {
  background-color: #0056b3;
}
</style>
